<template>
  <van-row class="wechat-loading-page-container" type="flex">
    <van-row id="main">
      <!-- 提现弹框 -->
      <van-popup
        :close-on-click-overlay="false"
        v-model="isShow"
        class="withdraw-deposit-pop-up-wrap"
        duration="0.1"
      >
        <img src="@/assets/image/pop_cashout.png" />
        <van-row class="loading-red-packet-text" type="flex" justify="center">
          <span class="detail-money">{{ money }}</span>
          <span class="unit">元</span>
        </van-row>

        <!-- 祝贺词 -->
        <van-row
          class="greetings-info-wrap"
          type="flex"
          justify="center"
          align="center"
        >
          <span class="greetings-info">新年好，送你新春礼包</span>
        </van-row>

        <!-- 提现按钮 -->
        <van-row
          class="go-cashout-btn-wrap"
          type="flex"
          justify="center"
          align="center"
        >
          <button class="go-cashout-btn" @click="goCashout">
            <img src="@/assets/image/btn_cashout.png" />
          </button>
        </van-row>

        <!-- 不是App不用户提示 -->
        <van-row
          v-if="!isApp"
          class="no-application-user-wrap"
          type="flex"
          justify="center"
          align="center"
        >
          <span class="no-application-user-info"
            >下载打开app，新用户即可直接提现1.00元现金</span
          >
        </van-row>
      </van-popup>
    </van-row>
    <van-row id="footer" type="flex" justify="space-around" align="center">
      <CardItem
        :count="item.count"
        :index="index"
        :key="item.id"
        v-for="(item, index) in user.cardList"
        class="card-item"
        :style="{
          background:
            item.count >= 1
              ? 'url(' +
                require('../assets/image/default_card_' + item.name + '.png') +
                ') no-repeat center/ contain '
              : 'url(' +
                require('../assets/image/dark_card_' + item.name + '.png') +
                ') no-repeat center/ contain ',
        }"
      />
    </van-row>
  </van-row>
</template>

<script>
import { mapGetters } from "vuex";
import CardItem from "@/components/CardItem";
export default {
  name: "WechatLoadingPage",
  components: { CardItem },
  props: {},
  data() {
    return {
      isShow: true,
      isApp: false,
      money: 0.5,
    };
  },
  computed: {
    ...mapGetters("activity", { user: "user" }),
  },
  watch: {},
  created() {},
  mounted() {
    alert(window.navigator.userAgent)
  },
  methods: {
    goCashout() {
      console.log("去提现");

      if(this.isApp===false){
        // 不是app  尝试跳转App
      }else{
        // App 内  进行提现
      }
    },
  },
};
</script>

<style scoped lang='less'>
.wechat-loading-page-container {
  height: 100%;
  flex-direction: column;
  background: url("~@/assets/image/bg.png");
}

.wechat-loading-page-container #main {
  flex: 1;
  /deep/.withdraw-deposit-pop-up-wrap {
    background: transparent;
    position: relative;
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: visible;

    img {
      width: 276px;
      height: auto;
    }
    .loading-red-packet-text {
      position: absolute;
      align-items: baseline;
      width: 100%;
      top: 10%;
      left: 0;
      .detail-money {
        font-size: 58px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #d12a3f;
        line-height: 82px;
      }
      .unit {
        position: relative;
        top: -5px;
        left: 5px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 17px;
        height: 17px;
        background: #d12a3f;
        border-radius: 50%;

        font-size: 11px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 15px;
      }
    }

    //  祝贺词
    .greetings-info-wrap {
      position: absolute;
      top: 60%;

      .greetings-info {
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #fee9c4;
        line-height: 24px;
      }
    }

    // 提现按钮
    .go-cashout-btn-wrap {
      position: absolute;
      bottom: 2%;
      .go-cashout-btn {
        img {
          width: 173px;
        }
      }
    }

    .no-application-user-wrap {
      position: absolute;
      bottom: -10%;
      .no-application-user-info {
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 18px;
      }
    }
  }
}

.wechat-loading-page-container #footer {
  width: 100%;
  height: 100px;
  .card-item {
    width: 60px;
    height: 80px;
  }
}
</style>